<template>
	<view>
		<view @touchstart="start" @touchend="end">
			<movable-area scale-area>
				<movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4"
					:scale-value="scale">
					<image style="background-color: black; min-width: 100vw; min-height: 100vh; "  :src="img" ></image>
				</movable-view>
			</movable-area>
		</view>
		
		<view class="bottom-fix width100 line-no ">
			
			<view v-for="(item ,index) in images" @click.stop="change(item)">
				<image class="image-nomal marginLeft" :src="item" mode="aspectFill"></image>
			</view>
			

		</view>
		
	</view>
</template>



<script>
	export default {
		data() {
			return {
				img: "",
				scale: 1.1,
				startData: {
					clientX: '0',
					clientY: '0'
				},
				images:["https://img0.baidu.com/it/u=2667454781,4131837890&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500","https://img0.baidu.com/it/u=2667454781,4131837890&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500",]
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onLoad(option) {
			this.images = option.images.split(',');
			this.img=this.images[0]
		},
		methods: {
			change(item){
				this.img=item;
			},
			onScale( e) {
               console.log(e)
			},
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY > 50 || subY < -50) {
					console.log('上下滑')
				} else {
					if (subX > 100) {
						console.log('右滑')
					} else if (subX < -100) {
						console.log('左滑')
					} else {
						console.log('无效')
					}
				}
			}
		}
	}
</script>



<style>
	@import url("../../common/uni.css");
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
	}

	movable-view image {
		width: 100%;
	}
</style>